<!-- components/tab-bar/tab-bar.vue -->
<template>
	<view class="tab-bar">
		<view class="tab-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(index, item.pagePath)">
			<!-- 图标容器 -->
			<view class="icon-container">
				<uni-icons :type="currentIndex === index ? item.selectedIconPath : item.iconPath" :size="iconSize"
					:color="currentIndex === index ? selectedColor : color"></uni-icons>
				<!-- 徽章提示 -->
				<uni-badge v-if="item.count > 0" :text="item.count > 99 ? '99+' : item.count.toString()" type="error"
					absolute="rightTop" :offset="[-10, -10]" />
			</view>
			<!-- 文字 -->
			<text class="tab-text" :style="{ color: currentIndex === index ? selectedColor : color }">
				{{ item.text }}
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TabBar",
		props: {
			// 标签列表配置
			tabList: {
				type: Array,
				default: () => [{
						text: "首页",
						iconPath: "home",
						selectedIconPath: "home-filled",
						pagePath: "/pages/home/home",
						count: 0
					},
					{
						text: "消息",
						iconPath: "chat",
						selectedIconPath: "chat-filled",
						pagePath: "/pages/message/message",
						count: 5
					},
					{
						text: "我的",
						iconPath: "person",
						selectedIconPath: "person-filled",
						pagePath: "/pages/my/my",
						count: 0
					}
				]
			},
			// 当前选中索引
			currentIndex: {
				type: Number,
				default: 0
			},
			// 图标尺寸
			iconSize: {
				type: Number,
				default: 24
			},
			// 默认颜色
			color: {
				type: String,
				default: "#999"
			},
			// 选中颜色
			selectedColor: {
				type: String,
				default: "#007AFF"
			}
		},
		methods: {
			switchTab(index, path) {
				if (this.currentIndex === index) return;

				// 触发父组件更新当前选中索引
				this.$emit("update:currentIndex", index);

				// 执行页面跳转
				uni.switchTab({
					url: path,
					fail: () => {
						uni.redirectTo({
							url: path
						});
					}
				});
			}
		}
	};
</script>

<style scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
		z-index: 999;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.icon-container {
		position: relative;
		margin-bottom: 6rpx;
	}

	.tab-text {
		font-size: 22rpx;
		transform: scale(0.9);
	}
</style>